<template>
	<view>
		<u-popup bgColor="#333333" :show="show" safeAreaInsetTop mode="left" @close="close" @open="open">
			<view class="left_nav">
				<view class="el-tabs-s">
					<u-button v-if="addMenu"  color="rgb(66, 83, 216)" type="primary" style="width:100%;margin:10px auto'color:#ffffff" icon="plus" @click="addChat(1)">新增对话</u-button>
					<view v-if="chatsList.length > 0" style="margin-top: 10px;">
						<view v-for="(item,index) in chatsList" :key="index" class="chat_items" :class="{active:isActive == index}"
							@click="changeChat(index)">
							<view class="chat_title">
								{{ item.title }}
							</view>
							<view class="chat_del">
								<u-icon name='trash' color="#ffffff" @click="delChat(item,1)"></u-icon>
							</view>
						</view>
					</view>
					<view v-else style="text-align: center;padding-top: 100px;">
						<i style="font-size: 40px;" class="el-icon-folder-delete"></i>
						<view>暂无对话</view>
					</view>
				</view>
				<view v-if="chatsList.length > 0" class="footers" @click="clearItem(2)">
					<u-button :plain="true" color="#000000" icon='trash'>清空对话</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal :show="shows" :title="'提示'" :content="content" @confirm="ok" @cancel="cancel" showCancelButton></u-modal>
	</view>
</template>

<script>
	export default {
		props: ['chatsList','addMenu'],
		name: "menus",
		data() {
			return {
				show: false,
				shows:false,
				content:'确认删除当前记录吗',
				selectObj:{},
				isActive: 0,
				dianjiIndex:0,
			};
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			changeChat(data) {
				this.isActive = data
				this.$emit('changeChat',data)
				this.close()
			},
			addChat(index) {
					this.$emit('addChat',index)
					this.isActive = 0
					this.close()
			},
			cancel(){
				this.shows = false
				this.selectObj = {}
			},
			delChat(item,index){
				this.show = true
				this.dianjiIndex = index
				if(index == 1){
					this.content = '确认删除当前记录吗？'
					this.selectObj = item
				}
				this.shows = true
			},
			clearItem(index){
				this.show = false
				this.dianjiIndex = index
				this.content = '确认清空当前记录吗？'
				this.shows = true
			},
			ok(){
				this.shows = false
				if(this.dianjiIndex == 1){
					this.$emit('confirm',this.selectObj)
					setTimeout(()=>{
						this.isActive = 0
					},1000)
					
				}else{
					this.$emit('clearItem')
					setTimeout(()=>{
						this.isActive = 0
					},1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.left_nav {
		padding: 0 10upx;
		margin-top: 50upx;
		width: 50vw;

		.el-tabs-s {
			height: calc(100vh - 200upx);
			overflow-y: auto;
			text-align: center;

			.chat_items {
				display: flex;
				align-items: center;
				padding: 15px;
				justify-content: space-between;
				background: #ffffff;
				margin: 3px 0;
				cursor: pointer;

				.chat_title {
					white-space: nowrap;
					overflow: hidden;
					font-size: 26upx;
					text-overflow: ellipsis;
				}
			}

			.chat_items.active {
				// background: #3B7BFC;
				background: linear-gradient(to right, rgba(66, 83, 216, .5), rgba(213, 51, 186, .8));
				color: #ffffff;
			}
		}
	}

	.footers {
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		overflow: hidden;
	}
</style>
<style>
	.u-popup__content{
		background: #000000;
	}
</style>